import React from 'react'
import PropTypes from 'prop-types'
// import LwjArea from '../common/LwjArea'
import {LwjUpload} from 'components'

import {
  Form,
  Button,
  Card,
  Checkbox,
  Icon,
  Input,
  InputNumber,
  Radio,
  Modal,
  Cascader,
  Select,
  Switch,
  Upload,
  Divider,
  Table

} from 'antd'

const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
}

const customPanelStyle = {
  marginBottom: 24
};

const Edit = ({
  item = {},
  onOk,
  onAddParam,
  onDeleteParam,
  onParamsChange,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue
  },
  dispatch,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key
      }

      let result = {
        ...item,
        ...data
      }
      delete result.success;
      delete result.message;
      delete result.statusCode;
      delete result.area;
      delete result.res;
      onOk(result)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk
  }

  const renderColumns = (text, record, column) => {
    return (
      <div>
        <Input
          style={{
          margin: '-5px 0'
        }}
          value={text}
          onChange={e => onParamsChange(e.target.value, record, column)}/>
      </div>
    );
  }

  const handleSelectChange = (params, value) => {
    onParamsChange(value, params.record, params.column);
  }

  const handleCheckChange = (params, value) => {
    onParamsChange(value, params.record, params.column);
  }

  const handleDeleteParams = (record) => {
    onDeleteParam(record);
  }

  const plainOptions = [
    {
      label: '必填项',
      value: 'isRequired'
    }, {
      label: '模糊查询',
      value: 'isLike'
    }, {
      label: '日终时间',
      value: 'isDayEndTime'
    }
  ];

  const paramsColumns = [
    {
      title: '参数名称',
      dataIndex: 'testname',
      key: 'testname',
      render: (text, record) => renderColumns(text, record, 'testname')
    }, {
      title: '参数展示名称',
      dataIndex: 'displayName',
      key: 'displayName',
      render: (text, record) => renderColumns(text, record, 'displayName')
    }, {
      title: '参数类型',
      dataIndex: 'type',
      key: 'type',
      width: 140,
      render: (text, record) => {
        return (
          <Select
            defaultValue={record.type}
            onChange={handleSelectChange.bind(this, {text, record, column: "type"})}>
            <Option value="string">text</Option>
            <Option value="date">date</Option>
            <Option value="number">number</Option>
            {/* <Option value="select">select</Option> */}
          </Select>
        )
      }
    }, {
      title: '',
      key: 'setup',
      render: (text, record) => (
        <span>
          <CheckboxGroup
            options={plainOptions}
            onChange={handleCheckChange.bind(this, {text, record, column: "setup"})}
            defaultValue={record.defaultCheckValue}/>
        </span>
      )
    }, {
      title: '操作',
      render: (text, record) => {
        return (
          <div className="editable-row-operations">
            <a onClick={() => handleDeleteParams(record)}>删除</a>
          </div>
        );
      }
    }
  ];

  // item.params = [   {     'paramName': '',     'paramDisplayName': '',
  // 'paramType': '',     'paramSetup': ''   } ];

  const listProps = {
    dataSource: item.queryParamJson,
    pagination: false
  }

  const edit = (key) => {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      target.editable = true;
      this.setState({data: newData});
    }
  }

  const xlsProps = {
    target: '/services/reportConfig/upload/baobiao',
    uploadIcon: 'upload',
    fileType: '',
    onChange(value) {},
    showUploadList: true
  }

  const handleChange = () => {
    dispatch({
      type: 'reportConfig/setFormDirty',
      payload: {
        isFormDirty: true
      }
    })
  }
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Card type="inner" title="报表基础信息" style={customPanelStyle}>
          <FormItem label="报表名称" hasFeedback {...formItemLayout}>
            {getFieldDecorator('reportName', {
              initialValue: item.reportName,
              rules: [
                {
                  required: true,
                  message: '请填写报表名称'
                }
              ]
            })(<Input onChange={handleChange} placeholder='请输入报表名称'/>)}
          </FormItem>
          <FormItem label="数据来源系统" hasFeedback {...formItemLayout}>
            {getFieldDecorator('reportDataFromSys', {
              initialValue: `${item.reportDataFromSys
                ? item.reportDataFromSys
                : ''}`,
              rules: [
                {
                  required: true,
                  message: '请选择报表数据来源'
                }
              ]
            })(
              <Select onChange={handleChange}>
                <Option value="0">订单管理系统</Option>
                <Option value="1">金蝶K3Cloud</Option>
              </Select>
            )}
          </FormItem>
          {/* <FormItem label="数据地区" hasFeedback {...formItemLayout}>
            {getFieldDecorator('area', {
              initialValue: item.area,
              rules: [
                {
                  required: true
                }
              ]
            })(
              <LwjArea setDefaultValue={item.area} width={300} />
            )}
          </FormItem> */}
          <FormItem label="禁用" {...formItemLayout}>
            {getFieldDecorator('enabled', {initialValue: item.enabled})(<Switch defaultChecked={item.enabled}  onChange={handleChange} />)}
          </FormItem>
          <FormItem label="报表模板" {...formItemLayout}>
            {getFieldDecorator('templatePath', {
              initialValue: item.templatePath,
              rules: [
                {
                  required: true,
                  message: '请上传报表模板'
                }
              ]
            })(<LwjUpload onChange={handleChange} multiple={true} {...xlsProps} fileLists={item.templatePath}/>)}
          </FormItem>
          <FormItem label="sql" hasFeedback {...formItemLayout}>
            {getFieldDecorator('reportSql', {
              initialValue: item.reportSql,
              rules: [
                {
                  required: true,
                  message: '请填写查询sql'
                }
              ]
            })(<Input.TextArea onChange={handleChange} rows='15' placeholder='请输入sql'/>)}
          </FormItem>
          <FormItem label="备注" hasFeedback {...formItemLayout}>
            {getFieldDecorator('description', {initialValue: item.description})(<Input.TextArea onChange={handleChange} rows='5' placeholder='请输入备注'/>)}
          </FormItem>
        </Card>
        <Card type="inner" title="报表查询参数信息" style={customPanelStyle}>
          <Button onClick={e => onAddParam(item)}>添加查询条件</Button>
          <Table
            columns={paramsColumns}
            size="middle"
            rowKey={record => record.key}
            {...listProps}></Table>
        </Card>
        <Card type="inner" title="报表授权信息">
          <Table pagination='false'></Table>
        </Card>
      </Form>
    </Modal>
  )
}

Edit.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func
}

export default Form.create({})(Edit);
// export default connect(state => ({params:
// state.params}))(Form.create()(modal))
